<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- dom 当网页加载时浏览器会创建页面的文档对象模型（Document Object Model）
        我们可以用它来改变标签的属性
    -->
    <script>
        // //网页加载完成时运行里面的代码
        // window.onload = function(){
        //     //document.getElementById：根据id获取一个标签
        //    var btnObj = document.getElementById("btn");
        //    //当用户点击btn对象的时候，就会执行function里面的代码
        //    btnObj.onclick = function(){
        //        window.location.href = "http://www.baidu.com"
        //    }
        // }
        window.onload = function(){
            //更加简便的写法
        //    var btnObj = document.getElementById("btn");
        //    btnObj .onclick = function(){
        //         var imgObj = document.getElementById("img1");
        //         imgObj.width = 300;
        //         imgObj.height = 300;
        //     }
         //   var pObj = document.getElementById("p1");
            // 修改双标签(有头有尾值在中间的标签),要用innertext和innerHTML
            //innertext是你写什么页面上就会显示什么文本
            //innerHTML是你写什么标签页面上就会显示什么标签
         //   pObj.innerText = "<a href=''>我是a标签</a>";
            var inputObj = document.getElementById("username")
            //修改单标签用value函数
                inputObj.value = "我被修改了"
            
        }
    </script>
</head>
<body>
    <!-- <button id="btn">点击我去到百度</button> -->
    <button id="btn">点击我修改图片大小</button>
    <img id="img1" src="./img/EVDI]RAL~L{Y%H5EV9081YJ.png"/>
    <p id="p1">我是p标签</p>
    <input id="username" type="text" value="请输入账号">
</body>
</html>